import { FC, useState } from 'react';
import { Card } from 'antd';
// 引入Editor组件
import { Editor } from 'react-draft-wysiwyg';
import { EditorState, convertToRaw } from 'draft-js';
// 将编辑器的状态转成html
import draftToHtml from 'draftjs-to-html';
// 引入对应的css
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const Index: FC = () => {
  // 编辑器的状态
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const onEditorStateChange = (editorState: any) => {
    setEditorState(editorState);
  };

  return (
    <Card title="富文本编辑器">
      <Editor
        editorState={editorState}
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        onEditorStateChange={onEditorStateChange}
      />

      {/* 想把输入的内容在另一个标签显示 */}
      <textarea
        style={{ width: '100%' }}
        disabled
        value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
      />

      {/* <div>{draftToHtml(convertToRaw(editorState.getCurrentContent()))}</div> */}
      <div
        dangerouslySetInnerHTML={{
          __html: draftToHtml(convertToRaw(editorState.getCurrentContent())),
        }}
      ></div>
    </Card>
  );
};

export default Index;
